<template>
  <!-- 右边题目答案清单 -->
  <div>
    <!-- 右1 -->
    <div style="margin: 20px;">
      <span id="ni" style="height: 20px;">|</span>
      <span>{{ $t('user.verification-code.required1115661105760') }}</span>
      <a-table :columns="columns" :data-source="data" :pagination="false" style="margin-top: 10px;">
      </a-table>
    </div>
    <!-- 右2 -->
    <div style="margin: 20px; ">
      <div style="display: flex;">
        <span id="nin">|</span>
        <span>
          {{ $t('user.verification-code.required111566110577298') }}
        </span>
        <!-- 新建Action -->
        <naction style="margin-left: 10px;" />
      </div>
      <a-table :columns="columns1" :data-source="data1" :pagination="false" style="margin-top: 10px;">
        <span slot="action" slot-scope="record">
          <!-- 修改按钮 -->
          <a-button type="link" @click="edit(record.Id)">编辑</a-button>
          <!-- 删除按钮 -->
          <a-popconfirm title="此操作不可逆，是否确认删除?" @confirm="() => del(record.Id)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </a-table>
      <div style="margin-top: 5px; display: flex;" :gutter="10">
        <a-button @click="showModal" style="margin-top: 10px;" :span="2">
          触发风险
        </a-button>
        <a-modal v-model="visible" title="触发风险" @ok="handleOk">
          <!-- 第一行 -->
          <div style="display: flex;margin: 10px;">
            <div>
              <span>Risk ID</span>
              <span>
                <a-input placeholder="Risk 0066" style="width: 130px; margin-left: 40px;" size="small" />
              </span>
            </div>
            <div style="margin-left: 20px;">
              <span>Risk 名称</span>
              <span>
                <a-input placeholder="输入Risk 名称" style="width: 130px; margin-left: 15px;" size="small" />
              </span>
            </div>
          </div>
          <!-- 第二行 -->
          <div style="display: flex;margin: 10px;">
            <div>
              <span>Risk 来源</span>
              <span>
                <a-input placeholder="DPIA 0002" style="width: 130px; margin-left: 26px;" size="small" />
              </span>
            </div>
            <div style="margin-left: 20px;">
              <span>Risk 类型</span>
              <span>
                <a-select default-value=" 选择类型" style="width: 130px;margin-left: 15px;" @change="handleChange"
                  size="small">
                  <a-select-option value="jack">
                    Jack
                  </a-select-option>
                  <a-select-option value="lucy">
                    Lucy
                  </a-select-option>
                  <a-select-option value="Yiminghe">
                    yiminghe
                  </a-select-option>
                </a-select>
              </span>
            </div>
          </div>
          <!-- 第三行 -->
          <div style="display: flex; margin: 10px;">
            <div>
              <span>Deadline</span>
              <span>
                <a-input placeholder="Enter Date" style="width: 130px; margin-left: 27px;" size="small" />
              </span>
            </div>
            <div style="margin-left: 20px;">
              <span>Risk Owner</span>
              <span>
                <a-select default-value=" 选择处理Risk的负责人" style="width: 130px;margin-left: 8px;" @change="handleChange"
                  size="small">
                  <a-select-option value="jack">
                    Jack
                  </a-select-option>
                  <a-select-option value="lucy">
                    Lucy
                  </a-select-option>
                  <a-select-option value="Yiminghe">
                    yiminghe
                  </a-select-option>
                </a-select>
              </span>
            </div>
          </div>
          <!-- 第四行 -->
          <div style="margin: 10px;">
            <span>Risk Owner</span>
            <span>
              <a-input placeholder="当前DCO" style="width: 150px; margin-left: 9px;" size="small" />
            </span>
          </div>
          <!-- 第五行 -->
          <div style="margin: 10px;">
            <span>Risk描述</span>
            <span>
              <a-input placeholder="“输入Risk描述内容”" style="width: 360px; margin-left: 27px;" size="small" />
            </span>
          </div>
        </a-modal>
        <a-pagination size="small" :total="50" show-size-changer show-quick-jumper style="margin-left: 200px;"
          :span="8" />
      </div>
    </div>
    <div style="margin: 20px;">
      <span id="ni">|</span>
      <span>已触发风险</span>
      <a-table :columns="columns2" :data-source="data2" :pagination="false" style="margin-top: 10px;">
      </a-table>
    </div>
  </div>
</template>
<script>
import { Editor } from '@/components'
import Naction from './naction.vue'
const columns = [
  {
    title: '模块序列',
    dataIndex: 'key',
    align: 'center',
    width: '150px'

  },
  {
    title: '模块名称',
    dataIndex: 'dataKey',
    align: 'center',
    width: '200px'
  },
  {
    title: '评估意见',
    dataIndex: 'purAndNece',
    scopedSlots: { customRender: 'purAndNece' },
    align: 'center',
    width: '300px'

  },
]

const data = [
  {
    key: 1,
    dataKey: '从RPA读取及三小块啊是科技创新那可就',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可',
  },
  {
    key: 2,
    dataKey: '从RPA读取从RPA读取及三小块啊是科技创新那可就',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可就是',
  },
  {
    key: 3,
    dataKey: '从RPA读取从RPA读取及三小块啊是科技创新那可就是那',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可就',
  },

]
const columns1 = [
  {
    title: '合规要求编号',
    dataIndex: 'key',
    align: 'center',
  },
  {
    title: '合规要求名称',
    dataIndex: 'dataKey',
    align: 'center'
  },
  {
    title: 'Action来源',
    dataIndex: 'purAndNece',
    scopedSlots: { customRender: 'purAndNece' },
    align: 'center'
  },
  {
    title: 'Action责任人',
    dataIndex: 'notes',
    scopedSlots: { customRender: 'notes' },
    align: 'center'
  },
  {
    title: '发起时间',
    dataIndex: 'actime',
    scopedSlots: { customRender: 'actime' },
    align: 'center'
  },
  {
    title: '目标完成时间',
    dataIndex: 'sutime',
    scopedSlots: { customRender: 'sutime' },
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'state',
    scopedSlots: { customRender: 'state' },
    align: 'center'
  },
  {
    title: '最后更新时间',
    dataIndex: 'lstime',
    scopedSlots: { customRender: 'lstime' },
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  },
]

const data1 = [
  {
    key: 1,
    dataKey: '从RPA读',
    purAndNece: '从RPA读取',
    notes: '从RPA读',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
  },
  {
    key: 2,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读',
    notes: '从RPA读',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
  },
  {
    key: 3,
    dataKey: '从RPA读取从R',
    purAndNece: '从RPA读',
    notes: '从RPA读取可',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
  },

]
const columns2 = [
  {
    title: '风险ID',
    dataIndex: 'key',
    align: 'center',
  },
  {
    title: '风险名称',
    dataIndex: 'dataKey',
    align: 'center'
  },
  {
    title: '风险来源',
    dataIndex: 'purAndNece',
    scopedSlots: { customRender: 'purAndNece' },
    align: 'center'
  },
  {
    title: '类型',
    dataIndex: 'notes',
    scopedSlots: { customRender: 'notes' },
    align: 'center'
  },
  {
    title: '责任人',
    dataIndex: 'actime',
    scopedSlots: { customRender: 'actime' },
    align: 'center'
  },
  {
    title: 'DCO',
    dataIndex: 'sutime',
    scopedSlots: { customRender: 'sutime' },
    align: 'center'
  },
  {
    title: '执行阶段',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'cjtime',
    scopedSlots: { customRender: 'sutime' },
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'state',
    scopedSlots: { customRender: 'state' },
    align: 'center'
  },
  {
    title: '最后更新时间',
    dataIndex: 'lstime',
    scopedSlots: { customRender: 'lstime' },
    align: 'center'
  },

]

const data2 = [
  {
    key: 1,
    dataKey: '从RPA读',
    purAndNece: '从RPA读取',
    notes: '从RPA读',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
    cjtime: '2398',
    action: '1'
  },

]
export default {
  components: {
    Editor,
    Naction
  },
  data() {
    return {
      valuer: '',
      current: '',
      columns,
      data,
      columns1,
      data1,
      columns2,
      data2,
      value: '',
      visible: false,
      headers: {
        authorization: 'authorization-text',
      },
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    showmod() {
      this.visibles = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },

  },
}


</script>
<style lang="less" scoped>
.hao {
  margin: 10px 10px 10px 5px;
}

#ni {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

#nin {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 5px;
  height: 18px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
</style>
